<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>组任务</h2>

                <div class="clearfix"></div>
            </div>
            <style>
                .w_table th {
                    padding: 0;
                }
            </style>
            <div class="x_content">
                <input type="hidden" id="SERVERIP" th:value="${SERVERIP}" />
                <input type="hidden" id="LNGLOA" th:value="${LNG}" />
                <input type="hidden" id="LATLOA" th:value="${LAT}" />
                <table class="w_table table table-striped   bulk_action">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>案件编号</th>
                        <th>案件标题</th>
                        <th>案件来源</th>
                        <th>发生时间</th>
                        <th>当前环节</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="event">
                    <tr class="even pointer" th:each="data,iterStat : ${datas.content}" th:id="${data.eventId}"
                        th:attr="lng=${data.lng}, lat=${data.lat}"
                        th:taskId="${data.taskId}" onclick="assignment(this)">
                        <td ><a href="javascript:;" th:text="${iterStat.count}"></a></td>
                        <td ><a href="javascript:;" th:text="${data.eventCode}"></a></td>
                        <td ><a href="javascript:;" th:text="${data.eventTitle}"></a></td>
                        <td ><a href="javascript:;" th:text="${data.val}"></a></td>
                        <!--<td ><a href="javascript:;" th:text="${data.cdate}"></a></td>-->
                        <td ><a href="javascript:;" th:text="${#dates.format(data.cdate, 'yyyy-MM-dd HH:mm:ss')}"></a></td>
                        <td>
                            <button th:id="${data.eventId}" onclick="getImg(this)"
                                    class="fa fa fa-area-chart btn btn-round btn-default" type="button"
                                    data-toggle="modal" data-target="#myModalInfo_5">流程图
                            </button>
                        </td>
                        <td>
                            <button class="fa fa-pencil-square-o btn btn-round btn-default" type="button"
                                    th:id="${data.eventId}" onclick="Receive(this)">领取
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div style="margin: 0;" id="pagination" class="col-md-12 pagination"
                 th:replace="pagination :: pagination"></div>
        </div>

    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">

            <div class="x_content">
                <div id="map"></div>

            </div>
        </div>
        <div class="x_panel">

            <div class="x_content">
                <div class="" role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">

                        <li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab"
                                                                  data-toggle="tab" aria-expanded="true">详细信息</a>
                        </li>
                        <li role="presentation" class=""><a href="#tab_content2" id="" role="tab"
                                                            data-toggle="tab" aria-expanded="false">流转记录</a>
                        </li>
                        <li role="presentation" class="" style="display: none" id="hotTab"><a href="#tab_content3"
                                                                                              role="tab"
                                                                                              id="profile-tab2"
                                                                                              data-toggle="tab"
                                                                                              aria-expanded="false">举报人信息</a>
                        </li>
                        <li role="presentation" id="status" class="" style="display: none">
                            <a href="#tab_content4" role="tab"  data-toggle="tab"  aria-expanded="false">督办</a>
                        </li>
                        <li role="presentation" id="urgeStatus" class="" style="display: none">
                            <a href="#tab_content5" role="tab"  data-toggle="tab" style="display: none" aria-expanded="false">催办</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab">
                            <form class="form-horizontal form-label-left">
                                <!--举报人 描述   地理信息  姓名  联系方式   身份证号码-->
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">举报人姓名:</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control"  id="name"
                                               readonly="readonly"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">举报人联系方式:</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control"  id="tel"
                                               readonly="readonly"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">举报人身份证号码:</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control"  id="id"
                                               readonly="readonly"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">举报人描述：</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <textarea class="form-control" rows="3"
                                                    id="hotLineDescribe"
                                                  readonly="readonly"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">地理信息：</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <textarea class="form-control" rows="3"
                                                    id="addr"
                                                  readonly="readonly"></textarea>
                                    </div>
                                </div>


                                <div class="ln_solid"></div>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
                            <div class="x_content"
                                 style="width: 100%; min-height: 520px; height: auto; max-height: 520px; overflow:hidden; overflow-y: scroll;">
                                <ul class="list-unstyled timeline" id="commentTree">

                                </ul>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content1"
                             aria-labelledby="home-tab">
                            <form class="form-horizontal form-label-left">

                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-3 col-xs-12">上报人:</label>
                                    <div class="col-md-4 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" readonly="readonly" id="empName1" />
                                    </div>
                                    <label class="control-label col-md-2 col-sm-3 col-xs-12">案件分类:</label>
                                    <div class="col-md-4 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" readonly="readonly" id="eventTypeId" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-3 col-xs-12">所属网格：</label>
                                    <div class="col-md-10 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" readonly="readonly" id="gridId" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-3 col-xs-12">案件地址：</label>
                                    <div class="col-md-10 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" readonly="readonly" id="eventLocation" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-3 col-xs-12">案件位置：</label>
                                    <div class="col-md-5 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" id="lng" readonly="readonly" />
                                    </div>
                                    <div class="col-md-5 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" id="lat" readonly="readonly" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-3 col-xs-12">案件编码：</label>
                                    <div class="col-md-10 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" id="eventCode" readonly="readonly" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-3 col-xs-12">案件描述：</label>
                                    <div class="col-md-10 col-sm-9 col-xs-12">
                                        <textarea class="form-control" rows="3" id="eventContent"  readonly="readonly"></textarea>
                                    </div>
                                </div>
                                <div class="ln_solid"></div>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_content4" aria-labelledby="profile-tab">
                            <div class="x_content"
                                 style="width: 100%; min-height: 120px; height: auto; max-height: 280px; overflow:hidden; overflow-y: scroll;">
                                <ul class="list-unstyled timeline" id="commentTree4">
                                    <li>
                                        <div class="block du">
                                            <div class="tags">
                                                <style>
                                                    .du .tag:after { border-left: 11px solid #9935fe; }
                                                    .cui .tag:after { border-left: 11px solid #fa5959; }
                                                </style>
                                                <a href="" class="tag" style="background: #9935fe; ">
                                                    <span>Entertainment</span>
                                                </a>
                                            </div>
                                            <div class="block_content">
                                                <h2 class="title">
                                                    <a>Smith</a>
                                                </h2>
                                                <div class="byline">
                                                    by <a>Jane Smith</a>
                                                </div>
                                                <p class="excerpt">Film festivals used to be do-or-die
                                                    moments for movie makers. They
                                                    were where you met the producers that could fund your project, and
                                                    if the buyers
                                                    liked your flick, they’d pay to Fast-forward and… <a>
                                                    </a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_content5" aria-labelledby="profile-tab">
                            <div class="x_content"
                                 style="width: 100%; min-height: 120px; height: auto; max-height: 280px; overflow:hidden; overflow-y: scroll;">
                                <ul class="list-unstyled timeline" id="commentTree5">
                                    <li>
                                        <div class="block cui">
                                            <div class="tags">
                                                <style>
                                                    .du .tag:after { border-left: 11px solid #9935fe; }
                                                    .cui .tag:after { border-left: 11px solid #fa5959; }
                                                </style>
                                                <a href="" class="tag" style="background: #fa5959; ">
                                                    <span>Entertainment</span>
                                                </a>
                                            </div>
                                            <div class="block_content">
                                                <h2 class="title">
                                                    <a>Smith</a>
                                                </h2>
                                                <div class="byline">
                                                    by <a>Jane Smith</a>
                                                </div>
                                                <p class="excerpt">Film festivals used to be do-or-die
                                                    moments for movie makers. They
                                                    were where you met the producers that could fund your project, and
                                                    if the buyers
                                                    liked your flick, they’d pay to Fast-forward and… <a>
                                                    </a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>



                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalInfo" tabindex="-1" role="dialog" aria-labelledby="ModalInfo">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">附件信息</h4>
            </div>
            <div class="modal-body">
                <div class="" role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="2myTab" class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#2tab_content12" id="2home-tab2" role="tab"
                                                                  data-toggle="tab" aria-expanded="true">图片</a>
                        </li>
                        <li role="presentation" class=""><a href="#video" role="tab" id="2profile-tab12"
                                                            data-toggle="tab" aria-expanded="false">视频</a>
                        </li>
                        <li role="presentation" class=""><a href="#audio" role="tab" id="2profile-tab22"
                                                            data-toggle="tab" aria-expanded="false">音频</a>
                        </li>
                    </ul>
                    <div id="picture" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="2tab_content12"
                             aria-labelledby="profile-tab">
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <!--<ol class="carousel-indicators">-->
                                    <!--<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>-->
                                    <!--<li data-target="#carousel-example-generic" data-slide-to="1"></li>-->
                                    <!--<li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
                                <!--</ol>-->
                                <!-- Wrapper for slides -->
                                <div id="eventImg" class="carousel-inner" role="listbox">

                                </div>
                                <!-- Controls -->
                                <!--<a class="left carousel-control" href="#carousel-example-generic" role="button"-->
                                   <!--data-slide="prev">-->
                                    <!--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
                                    <!--<span class="sr-only">Previous</span>-->
                                <!--</a>-->
                                <!--<a class="right carousel-control" href="#carousel-example-generic" role="button"-->
                                   <!--data-slide="next">-->
                                    <!--<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
                                    <!--<span class="sr-only">Next</span>-->
                                <!--</a>-->
                            </div>

                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="video" aria-labelledby="profile-tab">
                            <div id="mp4"
                                 style="width: 100%; min-height: 120px; height: auto; max-height: 280px;  overflow:hidden; overflow-y: scroll;">
                                视频展示以及视频插件
                                <video width="320" height="240" controls>
                                    <source th:each="accessory,iterStat : ${messageAccessories}"
                                            th:src="@{'http://localhost:8020/'+${accessory.accessoryPath}}" width="352"
                                            height="264" controls autobuffer th:if="${accessory.accessoryType}=='2'"
                                            type="video/mp4">
                                    您的浏览器不支持 HTML5 video 标签。
                                </video>
                            </div>
                        </div>
                        <div role="tabpanel" id="audio" class="tab-pane fade" aria-labelledby="profile-tab">
                            <div id="mp3"
                                 style="width: 100%; min-height: 120px; height: auto; max-height: 280px;  overflow:hidden; overflow-y: scroll;">
                                <!--<audio controls>-->
                                <!--<source th:each="accessory,iterStat : ${messageAccessories}" height="100" width="352" th:src="@{'http://localhost:8020/'+${accessory.accessoryPath}}" th:if="${accessory.accessoryType}=='1'" type="audio/ogg">-->
                                <!--您的浏览器不支持 audio 元素。-->
                                <!--</audio>-->
                                <!--<audio controls>-->
                                <!--<source height='100' width='352' src='http://localhost:8020/dfa.mp3' type='audio/ogg'>-->
                                <!--您的浏览器不支持 audio 元素。-->
                                <!--</audio>-->
                                <audio controls>
                                    <source height="100" width="352" type="audio/ogg/amr">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<div class="Play_area">
    <div class="this_area">
        <img src=""/>
    </div>
</div>

<div class="modal fade" id="myModalInfo_5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 1255px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">流程图</h4>
            </div>
            <div class="modal-body">
                <div id="lct" style="position: relative; width: 1130px; margin: 0 auto">
                    <img style="display: block; width: 100%; margin: 0 auto;" id="img" class="chart_img"/>
                    <div id="imgstyle">
                        <i class="fa fa-bookmark" style=" float: right; margin:8px; color: rgb(230,28,100);"></i>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>

            </div>
        </div>
    </div>
</div>
<style>
    .w_table tbody tr.on { background: #eaf4f2; }
</style>
<script>
    $(document).ready(function () {
        $(".w_table tbody tr").click(function () {
            $(".w_table tbody tr").removeClass("on")
            $(this).addClass("on");
        });
    });
</script>
<script type="text/javascript" th:inline="javascript">
    $(document).ready(function () {
        $('#myCarousel').carousel();
        $(".this_block").each(function () {
            $(this).click(function () {
                $(".Play_area").fadeIn();
            })
        });
        $(".Play_area").click(function () {
            $(this).fadeOut();
        })


    });

    //地图
    var SERVERIP = $("#SERVERIP").val(), LNGLOA = $("#LNGLOA").val(), LATLOA = $("#LATLOA").val();
    var map, baiduLayer, layerCH, vector, layer, markerlayer, marker, dataAdded = false,
        urlCH = SERVERIP + HB_SERVER_CH,
        url=SERVERIP+HB_SERVER_IP;
    //初始化地图及图层
    $(function () {
        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation(),
                new SuperMap.Control.LayerSwitcher()
            ],
            units: "m", allOverlays: true
        });
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, {maxResolution: "auto"});
        layer.events.on({"layerInitialized": addLayer1});
        vector = new SuperMap.Layer.Vector("vector");
        markerlayer = new SuperMap.Layer.Markers("markerLayer");
    });

    //加载
    function addLayer1() {
        layerCH = new SuperMap.Layer.TiledDynamicRESTLayer("中文注释", urlCH, {
            transparent: true,
            cacheEnabled: true
        });
        layerCH.events.on({
            "layerInitialized": addLayer2
        });
        layerCH.setOpacity(0.9);
    }

    function addLayer2() {
        map.addLayers([layer,layerCH, vector,markerlayer]);
        //显示地图范围
        map.setCenter(new SuperMap.LonLat(LNGLOA,LATLOA), 13);
    }

    function getCommentList(obj) {
        var taskId = $(obj).attr("id");
        $.goToblock("/getCommentList/" + id);
    }
    function getImg(obj) {
        var id = $(obj).attr("id");
        $("#img").attr("src", "/event/viewImage?id=" + id);
        $.post("/event/findCoordingByTaskId", {"id": id}, function (result) {
            $("#imgstyle").attr("style", " position: absolute; top: " + result.y + "px; left: " + result.x + "px; width: " + result.width + "px; height: " + result.height + "px; z-index: 2; ");
        });
    }
    $.extend({
        goToblock: function (url, data) {
            $(".block").load(url, data, function (res) {
                return true;
            });
        }
    })
    /*]]>*/


</script>